<template>
  <div class="section section-share is-unit text-c">
    <div ref="shareEle" class="section-inner">
      <img
        :src="require('../../../assets/img/yearReport/2020/unit/'+(new Date(reportData.startDate).getFullYear()||'emicon')+'.png')"
        class="img-year"
      />
      <!-- <img src="../../../assets/img/yearReport/2020/unit/2020.png" class="img-year"> -->
      <img src="../../../assets/img/yearReport/2020/unit/title.png" class="img-title" />
      <div class="envelope-wrap">
        <img class="envelope-cover" src="../../../assets/img/yearReport/2020/unit/envelope-cover.png" />
        <div :class="{ 'is-show':showQrcode }" class="qrcode">
          <img v-if="url" class="qrcode-img" :src="url" />
        </div>
      </div>
      <div class="scan-tip">扫码开启{{new Date(reportData.startDate).getFullYear()}}年报</div>
    </div>
    <img v-if="shareImg" class="img-share" :src="shareImg" />
    <div v-if="shareImg" class="press-text text-c">长按保存图片</div>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    orgName: {
      type: String,
      default: '',
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    active(val) {
      if (val) {
        this.createQrcode()
      }
    },
    reportData(value) {
      var time = new Date(value.startDate)
      this.startYear = time.getFullYear()
    },
  },
  data() {
    return {
      showQrcode: false,
      url: '',
      shareImg: '',
      height: '100vh',
      startYear: '',
    }
  },
  methods: {
    createImg() {
      html2canvas(this.$refs.shareEle, {
        useCORS: true,
      }).then((canvas) => {
        html2canvas(this.$refs.shareEle, {
          useCORS: true,
        }).then((canvas) => {
          this.shareImg = canvas.toDataURL()
        })
      })
    },
    createQrcode() {
      QRCode.toDataURL(
        location.href.replace('inFrame=1&', '').replace('inFrame=1', ''),
        {
          margin: 3,
        }
      )
        .then((url) => {
          this.url = url
          setTimeout(() => {
            this.showQrcode = true
          }, 700)
          setTimeout(() => {
            this.createImg()
          }, 1200)
        })
        .catch((err) => {
          console.error(err)
        })
    },
  },
  mounted() {},
}
</script>

<style lang="scss">
.section-share {
  &.is-unit {
    .section-inner {
      background: url(../../../assets/img/yearReport/2020/unit/bg.png) center
        no-repeat;
      background-size: 100% 100%;
    }
    .img-year {
      width: 55.5%;
      height: 15.6%;
      margin: 14.8% auto 0;
    }
    .img-title {
      width: 66%;
    }
  }
}
</style>